<script setup lang="ts">
import { VideoPlay, VideoPause, CircleClose, Download } from "@element-plus/icons-vue"
const props = defineProps<{data?: any[]}>()

function customColorMethod(percentage: number){
  if (percentage < 30) {
    return '#909399'
  }
  if (percentage < 70) {
    return '#e6a23c'
  }
  return '#67c23a'
}
</script>

<template>
<el-table :data="props.data">
  <el-table-column label="序号" type="index" width="60"></el-table-column>
  <el-table-column label="状态" prop="status"></el-table-column>
  <el-table-column label="进度" prop="" width="300">
    <template #default="{ row }">
      <el-progress :percentage="row.status" :color="customColorMethod(row.status)" />
    </template>
  </el-table-column>
  <el-table-column label="通道" prop="channel"></el-table-column>
  <el-table-column label="开始时间" prop="startTime" width="180"></el-table-column>
  <el-table-column label="结束时间" prop="endTime" width="180"></el-table-column>
  <el-table-column label="开始下载时间" prop="startDownTime" width="180"></el-table-column>
  <el-table-column label="结束下载时间" prop="endDownTime" width="180"></el-table-column>
  <el-table-column label="文件名" prop="fileName"></el-table-column>
  <el-table-column label="操作" fixed="right" width="120" style="position:relative;">
    <template #default="{ row }">
     <div class="control">
       <span class="control_item">
         <el-button type="success" link>
           <el-icon v-if="true" size="25"><VideoPlay /></el-icon>
           <el-icon v-else size="25"><VideoPause /></el-icon>
         </el-button>
      </span>
       <span class="control_item">
         <el-button type="danger" link>
           <el-icon size="25"><CircleClose /></el-icon>
         </el-button>
      </span>
       <span class="control_item">
         <el-button type="primary" link>
           <el-icon size="25"><Download /></el-icon>
         </el-button>
      </span>
     </div>
    </template>
  </el-table-column>
</el-table>
</template>

<style scoped>
.control{
  display: flex;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: space-evenly;
}
.control_item{
  height: 25px;
  width: 25px;
  display: inline-block;
}
button{
  padding: 0!important;
}
</style>
